import { useEffect, useState } from "react";
import { Banner } from "./cnps/banner/banner";
import { HomeWrapper } from "./style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { fetchHomeDataAction } from "../../store/moduels/home";
import { HomeSection } from "./cnps/home-section";
import { HomeSectionV2 } from "./cnps/home-sectionv2";
import { isEmptyo } from "../../utils/isEmptyo";
import { changeHeaderCofiig } from "../../store/moduels/main";

const Home = () => {
    let [data, setData] = useState([]);
    const dispatch = useDispatch();
    useEffect(()=>{
        dispatch(fetchHomeDataAction());
        dispatch(changeHeaderCofiig(true));
    }, [])
    //获取数据
    const {goodPriceInfo,goodScoreInfo,discountInfo,hotRecommentInfo} = useSelector((state) => ({
        goodPriceInfo: state.home.goodPriceInfo,
        goodScoreInfo: state.home.goodScoreInfo,
        discountInfo: state.home.discountInfo,
        hotRecommentInfo:state.home.hotRecommentInfo
    }),shallowEqual)
    
    return (
        <HomeWrapper>
            <Banner></Banner>
            {isEmptyo(discountInfo) && <HomeSectionV2 dataInfo={discountInfo}></HomeSectionV2>}
            {isEmptyo(hotRecommentInfo) && <HomeSectionV2 dataInfo={hotRecommentInfo}></HomeSectionV2>}
            <HomeSection dataInfo={goodPriceInfo}></HomeSection>
            <HomeSection dataInfo={goodScoreInfo}></HomeSection>
        </HomeWrapper>
    )
}
export default Home;
